<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>航空票务查询及订票系统</title>

    <!-- Custom fonts for this template -->
    <link th:href="@{/vendor/fontawesome-free/css/all.min.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/google-font.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link th:href="@{/css/sb-admin-2.min.css}" rel="stylesheet">

    <!-- Custom styles for this page -->
    <link th:href="@{/vendor/datatables/dataTables.bootstrap4.min.css}" rel="stylesheet">
    <style>
        #content{
            min-height: 700px;
        }
    </style>
</head>

<body id="page-top">

<!-- Page Wrapper -->
<div id="wrapper">
    <!-- 侧边栏 -->
    <ul th:replace="~{commons/commons::sideBar}"></ul>
    <!-- 侧边栏结束 -->
    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content" >

            <!-- 顶部栏 -->
            <nav th:replace="~{commons/commons::topBar}"></nav>
            <!-- 顶部栏结束 -->
            <div class="container ">

                <div  class="card shadow mb-4 o-hidden border-0 shadow-lg my-5">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">该功能正在开发中，敬请期待...</h6>
                    </div>

                    <div class="card-body" >
                        <canvas id="myChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        <!-- End of Main Content -->
        <!-- 页脚 -->
        <footer th:replace="~{commons/commons::footer}"></footer>
        <!-- 页脚结束 -->
    </div>
    <!-- End of Content Wrapper -->

</div>
<!-- End of Page Wrapper -->

<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
    <i class="fas fa-angle-up"></i>
</a>

<!-- 模态框 -->
<div th:replace="~{commons/commons::tmpModal}"></div>

<div class="alert"></div>
<!-- Bootstrap core JavaScript-->
<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    ctxPath = /*[[@{/}]]*/ '';
    /*]]>*/
</script>

<script th:src="@{/vendor/jquery/jquery.min.js}"></script>
<script th:src="@{/vendor/bootstrap/js/bootstrap.bundle.min.js}"></script>

<!-- Core plugin JavaScript-->
<script th:src="@{/vendor/jquery-easing/jquery.easing.min.js}"></script>

<!-- Custom scripts for all pages-->
<script th:src="@{/js/sb-admin-2.min.js}"></script>

<script th:src="@{vendor/chart.js/Chart.min.js}"></script>
<script>
    $("#navchart").parent().addClass("active");
    $("#navchart").click();
    var ctx = document.getElementById('myChart').getContext('2d');//2d表示图表是2d的
    var myBarChart = new Chart(ctx,{
        type: 'line',
        data: {
            labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            datasets: [{
                label: "Earnings",
                lineTension: 0.3,
                backgroundColor: "rgba(78, 115, 223, 0.05)",
                borderColor: "rgba(78, 115, 223, 1)",
                pointRadius: 3,
                pointBackgroundColor: "rgba(78, 115, 223, 1)",
                pointBorderColor: "rgba(78, 115, 223, 1)",
                pointHoverRadius: 3,
                pointHoverBackgroundColor: "rgba(78, 115, 223, 1)",
                pointHoverBorderColor: "rgba(78, 115, 223, 1)",
                pointHitRadius: 10,
                pointBorderWidth: 2,
                data: [0, 100, 50, 150, 100, 200, 150, 250, 200, 300, 250, 400],
            }],
        },
        options: {
            maintainAspectRatio: false,
            layout: {
                padding: {
                    left: 10,
                    right: 25,
                    top: 25,
                    bottom: 0
                }
            },
            scales: {
                xAxes: [{
                    time: {
                        unit: 'date'
                    },
                    gridLines: {
                        display: false,
                        drawBorder: false
                    },
                    ticks: {
                        maxTicksLimit: 7
                    }
                }],
                yAxes: [{
                    ticks: {
                        maxTicksLimit: 5,
                        padding: 10
                        // Include a dollar sign in the ticks
                        // callback: function(value, index, values) {
                        //     return '$' + number_format(value);
                        // }
                    },
                    gridLines: {
                        color: "rgb(234, 236, 244)",
                        zeroLineColor: "rgb(234, 236, 244)",
                        drawBorder: false,
                        borderDash: [2],
                        zeroLineBorderDash: [2]
                    }
                }],
            },
            legend: {
                display: false
            },
            tooltips: {
                backgroundColor: "rgb(255,255,255)",
                bodyFontColor: "#858796",
                titleMarginBottom: 10,
                titleFontColor: '#6e707e',
                titleFontSize: 14,
                borderColor: '#dddfeb',
                borderWidth: 1,
                xPadding: 15,
                yPadding: 15,
                displayColors: false,
                intersect: false,
                mode: 'index',
                caretPadding: 10
                // callbacks: {
                //     label: function(tooltipItem, chart) {
                //         var datasetLabel = chart.datasets[tooltipItem.datasetIndex].label || '';
                //         return datasetLabel + ': $' + number_format(tooltipItem.yLabel);
                //     }
                // }
            }
        }
    });
</script>
</body>

</html>
